<template>
  <div style="background-color: #eeeeee; min-height: 100vh">
    <div class="bg">
      <div style="position: relative; width: 600px">
        <div style="text-align: center; color: #eee; font-size: 30px; margin-bottom: 25px">好看、好用、好玩</div>
        <div style="display: flex">
          <el-input v-model="name" size="medium" placeholder="请输入商品名称关键字搜索" prefix-icon="el-icon-search" style="margin-right: 10px" clearable></el-input>
          <el-button type="primary" style="background-color: #7fa0df; border-radius: 10%" @click="$router.push({path:'/front/search',query:{name:name} })"><i class="el-icon-search"></i></el-button>
        </div>
      </div>
    </div>
    <div style="width: 70%; background-color: #fff; margin: 10px auto; padding: 10px; border-radius: 5px">
      <div style="padding: 10px 0">
        <div class="top_button" style="padding-right: 10px">
          <el-button type="primary" @click="$router.push('/front/addGoods')" >发布商品</el-button>
        </div>
        <div class="top_button" style="padding-right: 20px">
          <el-button type="primary" @click="$router.push('/front/addHelp')">发布求购</el-button>
        </div>
        <el-select style="width: 200px" v-model="category" @change="loadGoods(1)">
          <el-option value="全部" @change="this.loadGoods(1)"></el-option>
          <el-option v-for="item in categoryList" :key="item.name" :value="item.name"></el-option>
        </el-select>
        <el-select style="width: 200px; margin-left: 10px" v-model="sort" @change="loadGoods(1)">
          <el-option value="最新"></el-option>
          <el-option value="最热"></el-option>
        </el-select>
      </div>
      <div>
        <el-row :gutter="15">
          <el-col :span="6" v-for="item in goodsList" :key="item.id">
            <div style="margin-bottom: 30px" class="goods-item" @click="$router.push('/front/goodsDetail?id=' + item.id)">
              <img :src="item.img" style="width: 100%; height: 260px; margin-top: 15px; border-radius: 5px" />
              <div style="font-size: 15px; height: 40px" class="line2 goods-name" :title="item.name">{{ item.name }}</div>
              <div style="display: flex; align-items: baseline; margin-top: 10px">
                <div style="font-size: 20px">￥<strong style="color: red;">{{ item.price }}</strong></div>
                <span style="font-size: 14px; margin-left: 10px; color: #666666">{{ item.readCount }}人浏览</span>
                <span style="font-size: 14px; margin-left: 20px; color: #666666">{{ item.likeCount }}点赞</span>
              </div>
            </div>
          </el-col>
          <div v-if="total === 0" style="text-align: center; margin-top: 50px"><el-empty description="暂无商品"></el-empty></div>
        </el-row>
        <div class="pagination" v-if="total>pageSize">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[4, 8, 12]"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <div style="width: 100px; height: 5px; background-color: #eeeeee"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categoryList: [], // 商品分类列表
      goodsList: [], // 商品列表
      pageNum: 1, // 当前的页码
      pageSize: 8, // 每页显示的个数
      total: 0,
      category: '全部',
      sort: '最新',
      name:''
    };
  },
  mounted() {
    this.loadCategory();
    this.loadGoods(1); // 默认每页8条
  },
  methods: {
    handleCurrentChange(pageNum) {
      this.loadGoods(pageNum);
    },
    loadCategory() {
      this.$request.get('/category/selectAll').then(res => {
        if (res.code === '200') {
          this.categoryList = res.data || [];
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    loadGoods(pageNum) { // 分页查询
      this.$request.get('/goods/selectFrontPage', {
        params: {
          pageNum: pageNum,
          pageSize: this.pageSize,
          category: this.category === '全部' ? null : this.category,
          sort: this.sort
        }
      }).then(res => {
        if (res.code === '200') {
          this.goodsList = res.data?.list;
          this.total = res.data?.total;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    showPurchaseModal() {
      // 显示求购模态框或其他操作
      console.log('求购按钮被点击');
    }
  }
};
</script>

<style scoped>
.bg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  background-image: url("@/assets/imgs/bg/home.png");
  background-size: 100%; /* 让背景图片自适应屏幕宽度 */
  background-position-y: center; /* 让背景图片在y轴居中 */
}

.line2 {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 超出几行省略 */
  overflow: hidden;
}

.goods-item {
  transition: all 0.3s;
}

.goods-item:hover img {
  scale: 1.03;
}

.goods-item:hover .goods-name {
  color: #7fa0df;
}
.top_button {
  float: right;
}
</style>
